<!--
 * @Author: jqm123 2289662078@qq.com
 * @Date: 2025-06-10 15:02:14
 * @LastEditors: jqm123 2289662078@qq.com
 * @LastEditTime: 2025-07-22 14:21:42
 * @FilePath: /anxinxiu/src/subpages/otherPages/writeOfforder.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div v-show="!loading" class="home">
    <van-nav-bar title="安心修核销" fixed safe-area-inset-top />
    <div class="list">
      <van-cell-group :border="false">
        <van-cell>
          <template #title>
            <span class="cell_label">店铺名称</span>
          </template>
          <template>
            <span class="cell_value">{{ ticketinfo.storeName }}</span>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span class="cell_label">商品信息</span>
          </template>
          <template>
            <span class="cell_value">{{ ticketinfo.goodsName }}</span>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span class="cell_label">被核销人姓名</span>
          </template>
          <template>
            <span class="cell_value">{{ ticketinfo.memberName }}</span>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span class="cell_label">被核销人手机号</span>
          </template>
          <template>
            <span class="cell_value">{{ ticketinfo.memberMobile }}</span>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span class="cell_label">商品规格</span>
          </template>
          <template>
            <span class="cell_value">{{ specs }}</span>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span class="cell_label">可用数量</span>
          </template>
          <template>
            <span class="cell_value">{{ canUseNum }}</span>
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span class="cell_label">核销数量</span>
          </template>
          <template>
            <van-stepper
              v-model="useNum"
              theme="round"
              button-size="22"
              :max="canUseNum"
              disable-input
            />
          </template>
        </van-cell>
        <van-cell>
          <template #title>
            <span class="cell_label">实付金额</span>
          </template>
          <template>
            <span class="cell_value">{{ ticketinfo.flowPrice }}</span>
          </template>
        </van-cell>
      </van-cell-group>
    </div>

    <div class="btn">
      <van-button type="info" block round @click="take" :disable="hasTake">{{
        !hasTake ? "确认核销" : "已核销"
      }}</van-button>
    </div>
  </div>
</template>

<script>
import api from "@/api/api";

export default {
  components: {},
  props: {},
  data() {
    return {
      useNum: 1,
      ticketinfo: {},
      code: "",
      storeId: "",
      loading: true,
      hasTake: false,
    };
  },
  watch: {},
  computed: {
    specs() {
      if (this.ticketinfo) {
        let info = JSON.parse(this.ticketinfo.specs);
        let str = "";
        Object.keys(info).forEach((v, i) => {
          str += info[v];
        });
        return str;
      }
      return "";
    },
    canUseNum() {
      if (this.ticketinfo) {
        return Number(this.ticketinfo.num) - Number(this.ticketinfo.usedNum);
      }

      return 1;
    },
  },
  methods: {
    async getDetail() {
      this.$toast.loading("加载中");
      let res = await api
        .getTicketDetail({
          code: this.code,
          storeId: this.storeId,
        })
        .finally(() => {
          this.loading = false;
        });
      this.ticketinfo = res;
      this.$toast.clear();
    },
    take() {
      if (this.hasTake) {
        this.$toast("订单已核销，请勿重复点击");
        return;
      }
      api
        .takeWriteOff({
          storeId: this.storeId,
          useNum: this.useNum,
          verificationCode: this.code,
        })
        .then(() => {
          this.hasTake = true;
          this.$toast({
            message: "核销成功",
            duration: 1500,
          });
        })
        .catch((err) => {
          this.$toast(err);
        });
    },
  },
  created() {},
  mounted() {
    this.code = this.$route.query.code;
    this.storeId = this.$route.query.storeId;
    this.getDetail();
  },
};
</script>
<style lang="less" scoped>
.home {
  min-height: 100vh;
  background: url("https://zxcxappimg.oss-cn-hangzhou.aliyuncs.com//zxcxmall/2025/05/29/44dea588672142d48f873df92c7b625e.jpg")
    no-repeat;
  background-size: cover;
  background-attachment: local;
  background-position: top center;
  box-sizing: border-box;
  padding: 150px 30px 60px 30px;
  position: relative;
  .list {
    padding: 60px 0 0 0;
    /deep/ .van-cell-group {
      background-color: transparent;
      .van-cell {
        background-color: transparent;
        .cell_label {
          font-size: 56px;
          font-weight: bold;
          color: #000;
        }
        .cell_value {
          font-size: 50px;
          color: #69747c;
        }
      }
    }
    /deep/ .van-cell::after {
      border-bottom: 1px solid #000 !important;
    }
  }
  .btn {
    margin-top: 100px;
    padding: 0 200px;
  }
}
</style>
